import { FaAngleRight } from "react-icons/fa6";
import Link from "@/components/common/link"
import Icon from "../icon";
import classNames from "classnames";

interface Props {
  className?: string
  list: {
    href: string
    name: string
  }[]
}

const Breadcrumb = ({className, list}: Props) => {
  return (
    <ul className={classNames('flex gap-txt-gap-x md:gap-txt-gap-x-md', className)}>
      {list.map((item, index)=><li className="flex items-center gap-txt-gap-x md:gap-txt-gap-x-md group" key={index}>
        <Link className="group-last:text-primary font-medium" href={item.href}>{item.name}</Link> <Icon size="small" className={classNames('group-last:hidden')} icon={FaAngleRight} />
      </li>)}
    </ul>
  )
}

export default Breadcrumb